<template>
  <div class="right-top">
    <div class="right-top-title">
      <title-top :name="name" />
    </div>
    <div class="right-top-content">
      <el-table
        :data="tableData"
        height="188"
        row-class-name="custom-hover-row"
      >
        <el-table-column prop="date" label="售后编号" width="auto" />
        <el-table-column prop="type" label="售后类型" width="auto" />
        <el-table-column prop="name" label="客户名字" width="auto" />
        <el-table-column prop="phone" label="联系电话" width="auto" />
        <el-table-column prop="state" label="售后状态" width="auto" />
      </el-table>
    </div>
  </div>
</template>
<script>
import titleTop from "../../title/title.vue";
export default {
  name: "right-top",
  components: {
    titleTop,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    name: {
      type: String,
      default: () => "标题",
    },
  },
  data() {
    return {
      tableData: [
        {
          date: "BHQ001",
          type: "水机安装",
          name: "赵宇轩",
          phone: "13259547585",
          state: "待接单",
        },
        {
          date: "BHQ001",
          type: "水机安装",
          name: "赵宇轩",
          phone: "13259547585",
          state: "待接单",
        },
        {
          date: "BHQ001",
          type: "水机安装",
          name: "赵宇轩",
          phone: "13259547585",
          state: "待接单",
        },
        {
          date: "BHQ001",
          type: "水机安装",
          name: "赵宇轩",
          phone: "13259547585",
          state: "待接单",
        },
        {
          date: "BHQ001",
          type: "水机安装",
          name: "赵宇轩",
          phone: "13259547585",
          state: "待接单",
        },
        {
          date: "BHQ001",
          type: "水机安装",
          name: "赵宇轩",
          phone: "13259547585",
          state: "待接单",
        },
        {
          date: "BHQ001",
          type: "水机安装",
          name: "赵宇轩",
          phone: "13259547585",
          state: "待接单",
        },
        {
          date: "BHQ001",
          type: "水机安装",
          name: "赵宇轩",
          phone: "13259547585",
          state: "待接单",
        },
        {
          date: "BHQ001",
          type: "水机安装",
          name: "赵宇轩",
          phone: "13259547585",
          state: "待接单",
        },
      ],
    };
  },
  created() {},
  computed: {},
  mounted() {},
  methods: {},
  watch: {},
};
</script>
<style lang="less"></style>
<style lang="scss" scoped>
.right-top {
  height: 100% !important;
  .right-top-title {
    height: 40px;
  }

  .right-top-content {
    margin-top: 16px;
    ::v-deep .el-table th.el-table__cell {
      background: #2a4460 !important;
      height: 28px !important;
      padding: 0 !important;
      .cell {
        height: 28px;
        line-height: 28px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #738a99;
      }
    }

    ::v-deep .el-table .el-table__cell {
      padding: 0 !important;
    }
    ::v-deep .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-lea {
      border: none;
    }
    ::v-deep .el-table__body {
      height: 100%;
      width: auto !important;
    }
    ::v-deep .el-table__header {
      width: auto !important;
    }
    ::v-deep .el-table__cell.is-leaf {
      border: none;
    }
    ::v-deep .el-table::before {
      content: none;
    }

    ::v-deep .el-table tr {
      background: #1a283b !important;
      height: 28px !important;
      padding: 0 !important;
      .cell {
        height: 28px;
        line-height: 28px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #a3bccc;
      }
    }
    ::v-deep
      .el-table--enable-row-hover
      .el-table__body
      tr:hover
      > td.el-table__cell {
      background: none;
    }
    ::v-deep .el-table .custom-hover-row:hover {
      background: linear-gradient(
        270deg,
        #162a3f 0%,
        rgba(105, 179, 244, 0.8) 100%
      ) !important;
      color: red !important; /* 使用 !important 来覆盖默认样式 */
      font-size: 16px !important; /* 使用 !important 来覆盖默认样式 */
      .cell {
        font-size: 14px;
        color: #d9f0ff;
      }
    }
  }
}
</style>
